import React      from 'react'
import './category-selector.scss';
import MUtil      from "util/mm.jsx";
import Product    from "service/product-service.jsx";

let _mm = new MUtil();
let _product = new Product();

// 品类选择器
export default class CategorySelector extends React.Component {
  constructor(props){
    super(props);
    this.state={
      firstCategoryList  : [],
      firstCategoryId    : 0,
      secondCategoryList : [],
      secondCategoryId   : 0,
    }
  }
  // 加载一级分类
  loadFirstCategory() {
    _product.getCategoryList().then(res => {
      this.setState({
        firstCategoryList: res
      });
    }, errMsg => {
      _mm.errorTips(errMsg);
    })
  }
  // 加载二级分类
  loadSecondCategory() {
    _product.getCategoryList(this.state.firstCategoryId).then(res => {
      this.setState({
        secondCategoryList: res
      });
    }, errMsg => {
      _mm.errorTips(errMsg);
    })
  }
  // 选择一级品类
  onFirstCategoryChange(e) {
    if(e.props.readOnly){
      return;
    }
    let newValue = e.target.value || 0;
    this.setState({
      firstCategoryId    : newValue,
      // 这里是为了防止二级分类已经有值的情况
      secondCategoryId   : 0,
      secondCategoryList : [],
    }, () => {
      // 更新二级品类
      this.loadSecondCategory();
      this.onPropsCategoryChange();
    })
  }
  // 选择二级品类
  onSecondCategoryChange(e) {
    if(e.props.readOnly){
      return;
    }
    let newValue = e.target.value || 0;
    this.setState({
      secondCategoryId: newValue
    }, () => {
      this.onPropsCategoryChange();
    })
  }
  // 传给父组件选中的结果
  onPropsCategoryChange(e) {
    // 判断props里的回调函数是否存在
    let categoryChangle = typeof this.props.onCategoryChange === 'function';
    // 如果有二级品类
    if(this.state.secondCategoryId) {
      categoryChangle && this.props.onCategoryChange(this.state.secondCategoryId, this.state.firstCategoryId);
    }else {
      categoryChangle && this.props.onCategoryChange(this.state.firstCategoryId, 0);
    }
  }

  componentDidMount() {
    this.loadFirstCategory();
  }

  componentWillReceiveProps(nextProps) {
    let categoryIdChange        = nextProps.categoryId !== this.props.categoryId,
        parentCategoryIdChange  = nextProps.parentCategoryId !== this.props.parentCategoryId;
    // 数据没有发生变化，直接不做处理
    if(!categoryIdChange && !parentCategoryIdChange){
      return;
    }
    // 假如只有一级品类
    if(nextProps.parentCategoryId === 0) {
      this.setState({
        firstCategoryId   : nextProps.categoryId,
        secondCategoryId  : 0
      })
    }
    // 有两级品类
    else {
      this.setState({
        firstCategoryId   : nextProps.parentCategoryId,
        secondCategoryId  : nextProps.categoryId
      }, () => {
        parentCategoryIdChange && this.loadSecondCategory();
      })
    }
  }
  render() {
    return(
      <div className="col-md-10">
        <select  
          className="form-control cate-select"
          value={this.state.firstCategoryId}
          onChange={(e) => this.onFirstCategoryChange(e)}
          readOnly={this.props.readOnly}
        >
          <option value="">请选择一级分类</option>
          {
            this.state.firstCategoryList.map(
              (category, index) => <option value={category.id} key={index}>{category.name}</option>
            )
          }
        </select>
        { this.state.secondCategoryList.length ?
          ( <select 
              value={this.state.secondCategoryId} 
              className="form-control cate-select" 
              readOnly={this.props.readOnly}
              onChange={(e) => this.onSecondCategoryChange(e)}
            >
              <option value="">请选择二级分类</option>
              {
                this.state.secondCategoryList.map(
                  (category, index) => <option value={category.id} key={index}>{category.name}</option>
                )
              }
            </select>
          ) : null
        }
      </div>
    )
  }
}